<template>
  <div class="flex flex-col gap-4">
    <a-card title="本地缓存">
      <div class="grid grid-cols-3 gap-4">
        <a-card>
          <div class="image-container">
            <img :src="getImageByFullPath('image-icon/forbidden.png')" width="48" />
          </div>

          <div class="my-8">
            <a-button type="primary" danger @click="reloadImages">清空缓存</a-button>
          </div>
          <div class="text-[12px] text-gray-400">从服务器重新获取图片</div>
        </a-card>
        <a-card :hoverable="false">
          <div>
            <div class="image-container">
              <a-progress type="circle" :percent="usageSize / 4" :size="52">
                <template #format="percent">
                  <span class="text-[12px]">{{ percent.toFixed(4) }}%</span>
                </template>
              </a-progress>
            </div>
            <div class="my-8">
              <a-button type="primary" @click="queryCapacity">立即查询</a-button>
            </div>
            <div class="text-[12px] text-gray-400">查询本地存储容量</div>
          </div>
        </a-card>
        <a-card>
          <div class="image-container">
            <img src="../assets/clear.png" width="48" />
          </div>

          <div class="my-8">
            <a-button type="ghost" class="bg-orange-400" @click="resetConfig">重置设置</a-button>
          </div>
          <div class="text-[12px] text-gray-400">重置所有配置</div>
        </a-card>
      </div>
    </a-card>

    <!--  -->
    <a-card title="其他配置">
      <div class="flex flex-col gap-4">
        <a-flex justify="space-between">
          <div>超时</div>
          <div>
            <a-auto-complete
              style="width: 300px"
              v-model:value="devStore.$state.developer.timeout"
              :options="timeoutOptions"
            ></a-auto-complete>
            <div class="text-12 system__subtitle mt-8">
              <InfoCircleFilled />
              当请求超时则放弃请求
            </div>
          </div>
        </a-flex>
        <a-flex justify="space-between">
          <div>Token</div>
          <div>
            <a-textarea
              :auto-size="{ maxRows: 3 }"
              style="width: 300px"
              :value="userStore.$state.token"
              :disabled="!canEdit"
            ></a-textarea>
            <div class="text-right">
              <a-button type="link" @click="canEdit = true">编辑</a-button>
              <a-button type="link" @click="copyText(userStore.$state.token)">复制</a-button>
            </div>
          </div>
        </a-flex>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { getImageByFullPath } from '@/api/utils/image';
import { LOCAL_FORAGE_ENUM } from '@/global/enum/common';
import { loadSystemImages } from '@/initialization';
import useSystemStore from '@/store/system';
import useUserStore from '@/store/user';
import { bytesToSize } from '@/utils/common/format';
import { copyText } from '@/utils/common/utils';
import type { InfoCircleFilled } from '@ant-design/icons-vue';
import { Modal, message } from 'ant-design-vue';
import localforage from 'localforage';
import { timeoutOptions } from './options';
const userStore = useUserStore();
const devStore = useSystemStore();
/* 缓存容量 */
const usageSize = ref(0);
/* 是否允许编辑 */
const canEdit = ref(false);
const queryCapacity = () => {
  for (let item in window.localStorage) {
    if (window.localStorage.hasOwnProperty(item)) {
      let localItem = window.localStorage.getItem(item);
      if (localItem) {
        usageSize.value += localItem.length;
      }
    }
  }
  message.info(`已使用:${bytesToSize(usageSize.value)}`);
  usageSize.value = usageSize.value / 1024 / 1024;
};
const reloadImages = () => {
  Modal.confirm({
    title: '确认清空缓存吗？',
    centered: true,
    async onOk() {
      await localforage.setItem(LOCAL_FORAGE_ENUM.IMAGES, '');
      loadSystemImages();
    },
  });
};

const resetConfig = () => {
  Modal.confirm({
    title: `确认重置配置吗？`,
    centered: true,
    content: '这会影响壁纸，表格，主题配置等,重置后会刷新页面',
    async onOk() {
      await localforage.setItem(LOCAL_FORAGE_ENUM.IMAGES, '');
      await localforage.setItem(LOCAL_FORAGE_ENUM.BACKGROUND_SRC, '');
      localStorage.clear();
      location.reload();
    },
  });
};
</script>

<style lang="scss" scoped>
:deep(.ant-card-body) {
  text-align: center;
}
.image-container {
  height: 56px;
}
</style>
